<template>
  <div :class="['chat-header', !isPC && 'chat-header-h5']">
    <div
      v-if="!isPC && props.canCloseChat"
      :class="['chat-header-back', !isPC && 'chat-header-h5-back']"
      @click="closeChat(currentConversation.conversationID)"
    >
      <Icon :file="backSVG" />
      
    </div>
    <div class="chat-header-container">
      <Icon v-if="!isPC" style="width:32px;" :file="customerAvatarMobile" />
      <div :class="['chat-header-content', !isPC && 'chat-header-h5-content']">
         {{ isPC?  currentConversationName :'Hi，我是'+ currentConversationName }}
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import vue from '../../../adapter-vue';
import {
  TUIStore,
  StoreName,
  TUITranslateService,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import Icon from '../../common/Icon.vue';
import backSVG from '../../../assets/back.svg';
import customerAvatarMobile from '../../../assets/customer_avatar_mobile.png';
import { isPC } from '../../../utils/env';
const { ref, onMounted, onUnmounted } = vue;

interface IProps {
  canCloseChat: boolean;
}

const emits = defineEmits(['closeChat']);
const currentConversation = ref<IConversationModel>();
const currentConversationName = ref('');
const typingStatus = ref(false);

const props = withDefaults(defineProps<IProps>(), {
  canCloseChat: true,
});

onMounted(() => {
  TUIStore.watch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  });

  TUIStore.watch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  });
});

onUnmounted(() => {
  TUIStore.unwatch(StoreName.CONV, {
    currentConversation: onCurrentConversationUpdated,
  });

  TUIStore.unwatch(StoreName.CHAT, {
    typingStatus: onTypingStatusUpdated,
  });
});

const closeChat = (conversationID: string | undefined) => {
  emits('closeChat', conversationID);
};

function onCurrentConversationUpdated(conversation: IConversationModel) {
  currentConversation.value = conversation;
  currentConversationName.value = currentConversation?.value?.getShowName();
}

function onTypingStatusUpdated(status: boolean) {
  typingStatus.value = status;
  if (typingStatus.value) {
    currentConversationName.value
      = TUITranslateService.t('TUIChat.对方正在输入');
  } else {
    currentConversationName.value
      = currentConversation.value?.getShowName() || '';
  }
}
</script>
<style lang="scss" scoped>
.chat-header {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-bottom:1px solid #f3f4f7;

  &-container {
    display: flex;
    min-width: 0;
    flex-direction: row;
    justify-content: flex-start;
  }

  &-content {
    margin-right: 20px;
    flex: 1;
    font-size: 16px;
    line-height: 30px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    color: #000;
    letter-spacing: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &-back,
  &-setting {
    width: 27px;
    height: 27px;

    .icon {
      width: 100%;
      height: 100%;
    }
  }
}

.chat-header-h5 {
  border:none;
  justify-content: flex-start;
  &-back {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &-content {
    text-align: center;
  }
}
</style>
